<template>
 <div class="home-container">
    <van-tabs v-model="activeChose">
  <van-tab :title="channel.name"  v-for="channel in channelList" :key="channel.id" >
    <div class="scroll-wrapper">
      <ArticleList :channelList="channel"></ArticleList>
    </div>
  </van-tab>
</van-tabs>
<!-- 准备点击按钮 -->
    <div class="bar-btn" @click="showChannel">
      <van-icon name="wap-nav"/>
    </div>
    <!-- 使用action-sheet组件-->
    <van-action-sheet v-model="showChannelEdit" get-container="body">
        <!-- 使用模块 -->
        <ChannelEdit :channeldata="ChannelEditList"
        ref="clickEditform"
        @choseChannelNow="ChannelNow"
        @delChannelData="delChannelInfo"
        />
    </van-action-sheet>
 </div>
</template>

<script>
import ArticleList from './ArticleList'
import ChannelEdit from './ChannelEdit'
import { getChannels } from '@/api/channel'
import { getItem } from '@/utils/ls'
export default {
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      channelList: [], // 页面数据
      showChannelEdit: false, // 弹出层
      ChannelEditList: [], // 编辑里的数据
      activeChose: null
    }
  },
  mounted () {
    this.loadHome()
  },
  methods: {
    // 首页头部信息
    loadHome () {
      // 调用接口
      getChannels().then((res) => {
        console.log(res)
        this.channelList = res.data.data.channels
      })
    },
    // 我的频道数据信息
    showChannel () {
      this.showChannelEdit = true // 显示弹出层
      // 调用接口
      getChannels().then((res) => {
        console.log(res)
        this.ChannelEditList = res.data.data.channels // 回填真实的编辑数据
        const locadata = getItem('addMy') // 定义一个变量接收本地保存的数据
        // 比较本地和获取的数据的长度
        if (locadata.length > this.ChannelEditList.length) {
          this.ChannelEditList = locadata // 如果本地保存的比开始获取的多就用本地保存的
        }

        this.$refs.clickEditform.clickEdit = false
      }).catch((err) => {
        console.log(err)
      })
    },
    // 接受子模块传来的删除指令
    delChannelInfo (index) {
      console.log(index)
      this.ChannelEditList.splice(index, 1) // 删除编辑项里的
      this.channelList.splice(index, 1) // 删除头部信息
    },
    // 选择当前频道
    ChannelNow (index) {
      this.activeChose = index
      this.showChannelEdit = false
    }
  }
}
</script>

<style scoped lang='less'>
// 专门为列表区域腾出一块空间
/deep/.van-tabs__content {
    position: fixed;
    top: 96px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
}
.bar-btn {
        position: fixed;
        right: 5px;
        top: 57px;
        display: flex;
        align-items: center;
        background-color: #fff;
        opacity: 0.8;
        z-index:1;
        .van-icon-wap-nav{
          font-size: 20px;
        }
      }
</style>
